import React, { Component } from 'react';
import axios from 'axios';



class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            name:'1111',
            counter:'另一个',
            date:new Date().toLocaleTimeString(),
            data:{},
            data1:{
                "new":"显示合并"
            },
            data2:{
                "news":"显示合并了"
            },
            mediareports:{
                page_number:'2',
                page_size:'10'
            }
        }
        // Object.assign(targetObj, sourceObj1, sourceObj2);
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    async postApi(url,cfg,headers){
        let fd = new FormData();
        for(let key in cfg){
            fd.append(key, cfg[key]);
        }
        let	data = await axios.post(url,fd,{
            headers: headers
        })
        return data;
    }
    componentDidMount(){
        const cfg = this.state.mediareports;
        this.getApi('/home/mediareports',cfg,{}).then((res)=>{
            console.log(res.data)
        })
        this.getApi('/api/server/_stm',{},{}).then((res)=>{
            console.log(res.data)
        })
        this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{
            console.log(res.data)
        })


        this.Timer = setTimeout(()=>{
            this.setState({
                name:'这是变化后的值'
            })
            // this.setState((state, props) => ({
            //       counter: state.counter + props.testProps
            // }));
            this.setState(function(state, props) {
                return {
                    counter: state.counter + props.testProps
                };
            });
            Object.assign(this.state.data, this.state.data1, this.state.data2);

            console.log(this.state.data)
        },1000)

        this.timerID = setInterval(()=>{
            this.setState({
                date:new Date().toLocaleTimeString()
            })
        },1000)
    }
    componentWillUnmount(){
        clearTimeout(this.Timer);
        clearTimeout(this.timerID);
    }
    render(){
        /**
        1、State
            外部参数也就是props，而数据状态就是state
            state不同于props的一点是，state是可以被改变的
        2、挂载 卸载
        3、定时器
        4、state累加器
        5、对象合并
        */
        return(

            <div>{this.state.counter}<br/>{this.state.name}{this.state.date}</div>
        )
    }
}
export default View;
